<template>
	<view class="store-detail-page">
		<view class="contain">
			<view class="main">
				<view style="width: 100%;position: relative;height: 300rpx;overflow: hidden;border-radius: 20rpx;">
					<image :src="storeDetail.logo"
						style="width: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"
						mode="aspectFill"></image>
				</view>
				<view class="title-box">
					<view class="mb20 row">
						<view class="xl bold mr20">
							{{storeDetail.name}}
						</view>
						<text class="tag"
							:style="storeDetail.type==0?'':'background:#FFDC89'">{{storeDetail.lxname}}</text>
					</view>
					<text class="text">{{storeDetail.address}}</text>
				</view>
				<view class="desc">服务范围：{{storeDetail.remarks}}</view>
				<view class="info-box">
					<view class="item phone">
						<image src="@/static/images/icon_7.png" mode="widthFix" class="icon-1"></image>
						<text class="text">{{storeDetail.tel}}</text>
						<image @tap="callPhone(storeDetail.tel)" src="@/static/images/icon_6.png" mode="widthFix"
							class="icon-2">
						</image>
					</view>
					<view class="item distance">
						<u-icon name="map" size="28" color="#999999"></u-icon>
						<text class="text">距您{{storeDetail.juli}}m</text>
					</view>
					<view class="item pos" @tap="openMap(storeDetail.lat,storeDetail.lng)">
						<image src="../../static/images/icon_8.png" mode="widthFix" class="icon"></image>
						<text class="text">导航</text>
					</view>
				</view>
			</view>

			<view class="goods mt20" v-if="goodsList.length">
				<view class="title">门店商品</view>
				<view class="goods-list">
					<goods-list type="store-detail" :list="goodsList"></goods-list>
				</view>
				<loading-footer :status="status"></loading-footer>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		loadingType
	} from '@/utils/type'
	import {
		loadingFun,
	} from '@/utils/tools'
	import {
		getfwwdDetail
	} from '../../../api/lease'
	export default {
		data() {
			return {
				page: 1,
				status: loadingType.LOADING,
				goodsList: [],
				params: null,
				storeDetail: null,
			}
		},
		async onLoad(options) {

			this.params = options;
			this.getBestListFun(1)

		},
		onReachBottom() {
			this.getBestListFun()
		},

		methods: {
			/**
			 * 拨打电话
			 * @param tel 电话
			 */
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			/** 
			 * 打开地图
			 * @param {*} lat 经度
			 * @param {*} lon 纬度
			 */
			openMap(lat, lon) {
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lon),
					fail(e) {
						console.log('调用地图失败:', e)
					}
				})
			},
			async getBestListFun(once = false) {
				let {
					page,
					goodsList,
					status
				} = this
				const data = await loadingFun(getfwwdDetail, page, goodsList, status, this.params)
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
				if (once)
					this.storeDetail = data.data.apply
			},


		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>